<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Product } from '@/api';
import { ElMessage } from 'element-plus';
import Upload_Img from '@/components/Upload.vue'

let load_form = ref({
    is_reply: '',
    data: '',
    store_name: '',
    key: '',
    order: '',
    account: '',
    product_id: 0,
    page: 1,
    limit: 15,
});
// 评论列表
let tableData = ref([]);
let reply_count = ref(0);
let load_reply_list = async (form) => {
    let { status, msg, data } = await Product.product_reply(form);
    console.log(status, msg, data);
    tableData.value = data.list;
    reply_count.value = data.count;
}
onMounted(() => {
    load_reply_list();
})
// 搜索
let handle_data = () => {
    load_reply_list(load_form.value)
}
let search_reply = () => {
    load_reply_list(load_form.value)
}
// 回复
let is_reply = ref(false);
let content = ref('');
let rply_id = ref(0)
let open_reply_dialog = (id) => {
    is_reply.value = true;
    rply_id.value = id;
}
let handle_reply = async () => {
    let { status, msg } = await Product.product_set_reply(rply_id.value, { content: content.value })
    if (status) {
        ElMessage.success(msg);
        load_reply_list();
        is_reply.value = false
    }
}
// 删除
let remove_reply = async (id) => {
    let { status, msg } = await Product.remove_reply(id)
    if (status) {
        ElMessage.success(msg);
        load_reply_list();
    }
}
// 添加自评
let is_add_reply = ref(false)
let add_reply_form = ref({})
let handle_add_reply = async () => {
    is_add_reply.value = true;
    let { status, msg, data } = await Product.product_fictitious_reply(0);
    if (status) {
        console.log(data);
        add_reply_form.value = data;
    }
}
</script>
<template>
    <el-card class="box-card">
        <template #header>
            <div style="display: flex; justify-content: space-between;">
                <el-link href="/product/list" :underline="false">
                    <el-icon>
                        <ArrowLeft></ArrowLeft>
                    </el-icon>
                    <span>返回</span>
                </el-link>
                <div>商品评论管理</div>
            </div>

        </template>
        <el-form :inline="true" :model="load_form" class="demo-form-inline">
            <el-form-item label="评论时间">
                <el-radio-group v-model="load_form.data" @change="handle_data">
                    <el-radio-button label="" value="">全部</el-radio-button>
                    <el-radio-button label="today" value="today">今天</el-radio-button>
                    <el-radio-button label="yesterday" value="yesterday">昨天</el-radio-button>
                    <el-radio-button label="lately7" value="lately7">最近7天</el-radio-button>
                    <el-radio-button label="lately30" value="lately30">最近30天</el-radio-button>
                    <el-radio-button label="month" value="month">本月</el-radio-button>
                    <el-radio-button label="year" value="year">本年</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-date-picker v-model="load_form.data" type="daterange" @change="handle_data"
                    start-placeholder="Start date" end-placeholder="End date" />
            </el-form-item>
        </el-form>
        <el-form :inline="true" :model="load_form" class="demo-form-inline">
            <el-form-item label="商品分类">
                <el-select v-model="load_form.is_reply" clearable @change="handle_data" placeholder="请选择商品分类">
                    <el-option label="已回复" :value="1"></el-option>
                    <el-option label="未回复" :value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品信息">
                <el-input v-model="load_form.store_name" style="width: 80%;" placeholder="请输入商品信息" />
            </el-form-item>
            <el-form-item style="width: 30%;" label="用户名称">
                <el-input v-model="load_form.account" style="width: 80%;" placeholder="请输入用户名称" />

            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search_reply">搜索</el-button>
            </el-form-item>
        </el-form>
        <div class="d-flex">
            <el-button type="primary" @click="handle_add_reply">添加自评</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%;margin-top: 15px;" :header-cell-style="{backgroundColor:'#ececec'}">
            <el-table-column prop="id" label="评论ID" />
            <el-table-column label="商品信息" width="240">
                <template #default="scope" style="display: flex; align-items: center;">
                    <el-row>
                        <el-col :span="6"><el-image style="width: 36px; " :src="scope.row.image"></el-image></el-col>
                        <el-col :span="18">{{ scope.row.store_name }}</el-col>
                    </el-row>

                </template>
            </el-table-column>
            <el-table-column prop="account" label="用户名称" />
            <el-table-column prop="score" label="评分" />
            <el-table-column prop="comment" label="评价内容" />
            <el-table-column prop="merchant_reply_content" label="回复内容" />
            <el-table-column prop="add_time" label="评价时间" />
            <el-table-column label="操作" width="120">
                <template #default="scope">
                    <el-button link type="primary" @click="open_reply_dialog(scope.row.id)" size="small">回复</el-button>
                    <el-button link type="primary" @click="remove_reply(scope.row.id)" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <!-- 回复 -->
    <el-dialog v-model="is_reply" title="回复评论">
        <el-input v-model="content" :rows="3" type="textarea" />
        <template #footer>
            <el-button @click="handle_reply" type="primary" size="small">确定</el-button>
        </template>
    </el-dialog>
    <!-- 添加自评 -->
    <el-dialog v-model="is_add_reply" :title="add_reply_form.title">
        <el-form :model="add_reply_form.rules" label-width="80px">
            <el-form-item v-for="item in add_reply_form.rules" :label="item.title" :value="item.value" :prop="item.field">
                <el-input v-if="item.type === 'input'" v-model="item.value" :type="item.props.type"
                    :placeholder="item.props.placeholder" style="width: 30%;"></el-input>
                <Upload_Img v-if="item.type === 'frame'"></Upload_Img>
                <el-rate v-if="item.type === 'rate'" v-model="item.value" allow-half />
                <el-date-picker v-if="item.type === 'datePicker'" v-model="item.value" :type="item.props.type"
                    :placeholder="item.props.placeholder" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="handle_reply" type="primary" size="small">确定</el-button>
        </template>
    </el-dialog>
</template>